<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></head>

<style>
        #top{
            border: 1px solid blue;
            height: 40px;
            width: 100%;
        }
        #top-right{
            height: 40px;
            width: 10%;
            float:right;
        }
        #mid{
            height: 500px;
            width: 100%;
        }
        #bottom{
            border: 1px solid blue;
            height: 40px;
            width: 100%;
        }
        #bottom-right{
            height: 40px;
            width: 10%;
            float:right;
        }
    </style>
</head>
<body>
<div id="all">
<div id="top">
    <div id="top-right">
        <a href="/shuiyin/index">文件</a>
    </div>
</div>
    <div id="mid">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <table class="table table-hover table-striped">
                    <thead>
                    <tr>
                        <th>文件路径</th>
                        <th>原图</th>
                        <th>水印图片</th>
                        <th>压缩图片</th>
                        <th>删除</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="imgt:${imgList}">
                        <td>
                            <span th:text="${imgt.img_url}"></span>
                        </td>
                        <td><!--th:onclick="'wenjina(' + ${imgt.img_name} + ');'"-->
                            <!--<a th:href="@{'/index/wenjian'(img_name=${imgt.img_name})}">-->
                            <span th:onclick="wenjian([[${imgt.img_name}]]);">
                            <img th:src="@{'/images/'+${imgt.img_name}}" style="width: 150px;height: auto"/>
                            </span>
                            <br><span th:text="${imgt.img_size}"></span>
                        </td>

                        <td>

                            <img th:src="@{'/images/'+${imgt.img_name2}}" style="width: 150px;height: auto"/>

                            <br><span th:text="${imgt.img_size2}"></span>
                        </td>
                        <td>
                            <img th:src="@{'/images/'+${imgt.img_name3}}" style="width: 150px;height: auto"/>
                            <br><span th:text="${imgt.img_size3}"></span>
                        </td>
                        <td><button type="button" th:onclick="del([[${imgt.img_name}]]);">删除</button></td>
                    </tr>

                    </tbody>
                </table>
            </div>
        </div>

    </div>
<div id="bottom">
    <div id="bottom-right">
        <a href="#">上一页</a>
        <a href="#">下一页</a>
    </div>
</div>

</div>
<script th:src="@{/resource/jquery.min.js}"></script>
<script type="text/javascript">

    function wenjian(ff) {
        alert(ff);
        ff = "img_name=" +ff;
        $.ajax({
            type: 'get',
            url: "/shuiyin/index/wenjian",
            data:ff,
            success: function (res) {

                //$(location).attr('href', '/')
                $(location).attr('href', '/shuiyin/index')
            },
            error: function (err) {
                alert('更新用户失败')
            }
        });
    }
    function del(ff) {

        ff = "img_name=" +ff;
        $.ajax({
            type: 'get',
            url: "/shuiyin/index/del",
            data: ff,
            success: function (res) {

                $(location).attr('href', '/shuiyin/index')
            },
            error: function (err) {
                alert('更新用户失败')
            }
        });
    }

</script>
</body>

</html>